<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="欢迎使用星遇校园后台管理系统">
          <div class="welcome-content">
            <h2>🎉 恭喜！RBAC权限系统已成功运行</h2>
            <p>基于Vue3 + TypeScript + Ant Design Pro的现代化后台管理系统</p>

            <a-divider />

            <a-row :gutter="24">
              <a-col :span="8">
                <a-card size="small">
                  <a-statistic
                    title="在线用户"
                    :value="1"
                    suffix="人"
                    :value-style="{ color: '#3f8600' }"
                  />
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small">
                  <a-statistic
                    title="总权限数"
                    :value="0"
                    suffix="个"
                    :value-style="{ color: '#1890ff' }"
                  />
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card size="small">
                  <a-statistic
                    title="可用菜单"
                    :value="0"
                    suffix="个"
                    :value-style="{ color: '#cf1322' }"
                  />
                </a-card>
              </a-col>
            </a-row>

            <a-divider />

            <div class="feature-list">
              <h3>✨ 系统特性</h3>
              <a-row :gutter="16">
                <a-col :span="12">
                  <ul>
                    <li>🔐 基于RBAC的权限控制</li>
                    <li>🎯 动态菜单路由生成</li>
                    <li>📱 响应式设计</li>
                    <li>🚀 TypeScript类型安全</li>
                  </ul>
                </a-col>
                <a-col :span="12">
                  <ul>
                    <li>🎨 Ant Design组件库</li>
                    <li>⚡ Vite构建工具</li>
                    <li>📦 Pinia状态管理</li>
                    <li>🔧 ESLint + Prettier</li>
                  </ul>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  UserOutlined,
  TeamOutlined,
  ShoppingCartOutlined,
  MoneyCollectOutlined,
} from '@ant-design/icons-vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

// 统计数据
const statsData = ref([
  {
    title: '在线用户',
    value: 1,
    suffix: '人',
    color: '#52c41a',
    icon: UserOutlined,
  },
  {
    title: '总权限数',
    value: 0,
    suffix: '个',
    color: '#1890ff',
    icon: TeamOutlined,
  },
  {
    title: '可用菜单',
    value: 0,
    suffix: '个',
    color: '#ff4d4f',
    icon: ShoppingCartOutlined,
  },
])

onMounted(() => {
  console.log('仪表盘组件已挂载')
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 24px;
}

.welcome-content {
  h2 {
    color: #1890ff;
    margin-bottom: 16px;
  }

  p {
    font-size: 16px;
    color: #666;
    margin-bottom: 24px;
  }

  .feature-list {
    h3 {
      color: #333;
      margin-bottom: 16px;
    }

    ul {
      list-style: none;
      padding: 0;

      li {
        padding: 8px 0;
        color: #555;
        font-size: 14px;
      }
    }
  }
}
</style> 